<template>
  <div>


    <!--<navComponent />-->
    <!--轮播导航-->
    <div class="slider-nav">
      <div class="nav-ce">
        <navIndexCom />
      </div>
      <div class="nav-normal">
        <navComponent />
      </div>
      <div>
        <el-carousel>
          <el-carousel-item v-for="item in banner" :key="item.id">
            <div class="banner_img" :style="{backgroundImage:'url('+item.banner_img+')'}"></div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <!--新闻块-->
    <div class="news-box main-width flex-box mt-normal">
      <div class="news-list">
        <div class="head-line">
          <nuxt-link :to="'/newsDetail/news/'+headLine.id">
            <div class="head-line-date">{{headLine.date}}</div>
            <div class="head-line-title">{{headLine.title}}</div>
          </nuxt-link>
        </div>
        <div class="news-items">
          <div class="news-item" v-for="newsitem in newsLi" :key="newsitem.id">
            <nuxt-link :to="'/newsDetail/news/'+newsitem.id">
              <div class="icon">
                <img src="@/static/right-icon.png" alt="">
              </div>
              <div class="item-date">{{newsitem.date}}</div>
              <div class="item-title">{{newsitem.title}}</div>
            </nuxt-link>
          </div>
        </div>
      </div>
      <div class="video-box">
        <video src="@/static/video/tfn.mp4"
               controls="controls"
               preload="auto"
               autoplay="autoplay"
               muted
        ></video>
      </div>
    </div>
    <!--社会责任板块-->
    <div class="out-box bottom mt-normal" >
      <div class="main-width flex-box">
        <div class="two-div" v-for="resp in respons" :key="resp.id" :style="{backgroundImage:'url('+resp.imgUrl+')'}" @mouseenter="enterResp(resp.id)" @mouseleave="leaveResp(resp.id)">
          <nuxt-link :to="'/details/responsibility/'+resp.id">

          </nuxt-link>
        </div>
      </div>
    </div>
    <!--健康中国科技为本-->
    <div class="out-box four-box mt-normal">
      <a href="#"></a>
    </div>
    <!--集团产业-->
    <div class="out-box mt-normal">
      <div class="main-width">
        <div class="industrial-title-cn">
          <span>集团产业</span>
        </div>
        <div class="industrial-title-en">INDUSTRIAL GROUP</div>
        <div class="group-list">
          <!-- <div class="group-item">
            <div class="item-img">
              <img src="~static/img/group-logo/yf.png" alt="天赋能健康产业研发">
            </div>
            <div class="item-des">
              <div><nuxt-link v-for="item in yanfa.content" :to="'/details/layout/'+item.id" :key="item.title">{{item.title}}</nuxt-link></div>
            </div>
          </div>
          <div class="group-item">
            <div class="item-img">
              <img src="~static/img/group-logo/sj.png" alt="天赋能健康产业数据">
            </div>
            <div class="item-des">
              <div><nuxt-link v-for="item in shuju.content" :to="'/details/layout/'+item.id" :key="item.title">{{item.title}}</nuxt-link></div>
            </div>
          </div>
          <div class="group-item">
            <div class="item-img">
              <img src="~static/img/group-logo/cp.png" alt="天赋能健康产业产品">
            </div>
            <div class="item-des">
              <div class="cp">
                <nuxt-link v-for="item in chanpin.content" :to="'/details/layout/'+item.id" :key="item.title">{{item.title}}</nuxt-link>
              </div>

            </div>
          </div>
          <div class="group-item">
            <div class="item-img">
              <img src="~static/img/group-logo/yl.png" alt="天赋能健康产业医疗">
            </div>
            <div class="item-des">
              <div><nuxt-link v-for="item in yiliao.content" :to="'/details/layout/'+item.id" :key="item.title">{{item.title}}</nuxt-link></div>
            </div>
          </div> -->
          <!-- <div class="group-item">
            <div class="item-img">
              <img src="~static/img/group-logo/jy.png" alt="天赋能健康产业教育">
            </div>
            <div class="item-des">
              <div><nuxt-link v-for="item in jiaoyu.content" :to="'/details/layout/'+item.id" :key="item.title">{{item.title}}</nuxt-link></div>
            </div>
          </div> -->
          <div class="group-item" v-for="item in layoutList" :key="item.id">
            <div class="title">{{item.class_name}}</div>
            <ul class="sub-class-list">
              <li v-for="child in item.content" :key="child.id">
                <nuxt-link :to="'/details/layout/' + child.id">{{child.title}}</nuxt-link> 
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';
  import navComponent from '@/components/navComponent.vue'
  import navIndexCom from '@/components/navIndexCom.vue'
  import toTop from '@/components/toTop.vue'
export default {
  components: {
    navComponent,
    navIndexCom,
    toTop
  },
  //获取新闻
  async asyncData({ $axios }) {
    const newsList = await $axios.$get('http://tfngw.tfnhg.com/Api/New/first_jtxw_eight');
    const respisibility = await $axios.$get('http://tfngw.tfnhg.com/Api/adminWeb/get_shzr');
    const layoutList = await $axios.$get('http://tfngw.tfnhg.com/Api/New/get_cybj_class');
    const banner = await $axios.$get('http://tfngw.tfnhg.com/Api/New/get_banner?type=1');
    const webInfo = await $axios.$get('http://tfngw.tfnhg.com/Api/New/get_web');
    let yf = layoutList[0];
    let sj = layoutList[1];
    let cp = layoutList[2];
    let yl = layoutList[3];
    let jy = layoutList[4];
    let headLine = newsList[0];
    for(let i in respisibility){
      respisibility[i].imgUrl = respisibility[i].img || ''
    }
    return { 
      headLine:headLine,
      newsLi:newsList.slice(1),
      respons:respisibility,
      yanfa:yf,
      shuju:sj,
      chanpin:cp,
      yiliao:yl,
      jiaoyu:jy,
      banner:banner,
      webInfo:webInfo,
      layoutList
    }
  },
  head(){
    return {
      meta: [
        { hid: 'description', name: 'description', content:this.webInfo.web_description },
        { hid: 'keywords', name: 'keywords', content:this.webInfo.web_keywords },
        { name: 'baidu-site-verification', content: 'code-fE3a5Jk1bT' }
      ]
    }
  },
  methods:{
    enterResp(id){
      let respons = this.respons;
      for(let i in respons){
        if(respons[i].id == id){
          respons[i].imgUrl = respons[i].act_img
        }
      }
      this.respons = respons;
    },
    leaveResp(id){
      let respons = this.respons;
      for(let i in respons){
        if(respons[i].id == id){
          respons[i].imgUrl = respons[i].img
        }
      }
      this.respons = respons;
    }
  }


}
</script>

<style lang="less">
  @import "~assets/css/main.less";
  .nav-ce{
    position: absolute;
    top:0;
    left:0;
    z-index:10;
    width: 100%;
  }
  .nav-normal{
    display: none;
    height:0;
  }
  .industrial-title-cn{
    // width: 266px;
    text-align: center;
    margin: 0 auto;
    font-size: 0.45rem;
    color:#967e62;
    // border-left: 4px solid #967e62;
    // border-right: 4px solid #967e62;
  }
  .industrial-title-cn span {
    padding: 0 40px;
    border-left: 4px solid #967e62;
    border-right: 4px solid #967e62;
  }
  .industrial-title-en{
    margin-top: 0.15rem;
    font-size: 0.28rem;
    width: 100%;
    text-align: center;
    color:#967e62;
    letter-spacing: 1px;
  }
  .group-list{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin-top: 20px;
  }
  .group-item{
    margin-top: 20px;
    width:25%;
  }
  .group-item .title {
    color: #967e62;
    font-size: .4rem;
    width: 1.6rem;
    margin: 0 auto;
    text-align: center;
    border: 2px solid #967e62;
    border-radius: 50%;
    height: 1.6rem;
    line-height: 1.6rem;
    font-weight: 500;
  }
  .group-item .sub-class-list {
    padding: 20px;
    box-sizing: border-box;
    color: #967e62;
    font-size: 0.15rem;
  }
  .group-item .sub-class-list li{
    line-height: 1.5;
    text-align: center;
  }
  .group-item .sub-class-list li a {
    color: #967e62;
  }
  .group-item .sub-class-list li:hover a{
    color: #006938;
  }
  .item-img{
    width: 60%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin: 0 auto;
    margin-bottom: 0.15rem;
  }
  .item-img img{
    width: 100%;
  }
  .item-des{
    width: 100%;
    margin: 0 auto;
    font-size: 0.13rem;
    color:#967e62;
  }
  .cp{
    display: grid;
    /*grid-template-columns: repeat(auto-fill, 200px);*/
    justify-content: center;
  }
  .cp a{
    text-align: left;
    margin-top: 0.05rem;
  }
  .cp a:first-child{
    margin: 0;
  }
  .item-des a{
    color:#967e62;
  }
  .item-des a:hover{
    color:#d1d1d1;
  }
  .item-des>div{
    margin-top: 0.05rem;
    text-align: center;
  }
  .four-box{
    height:4.74rem;
    background: url("~static/img/kj.png") center center/cover;
  }
  .four-box a{
    display: block;
    width: 100%;
    height:4.74rem;
  }
  .three-div{
    width: 32.67%;
    height:2.8rem;
    background-color: #ebe2d0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all .3s;
  }
  .two-div {
    width: 49%;
    height: 4.5rem;
    background-color: #ebe2d0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all .3s;
  }
  .two-div a{
    display: block;
    width:100%;
    height: 4.5rem;
    color:#968064;
    font-size: 0.15rem;
  }
  .three-div a{
    display: block;
    width: 100%;
    height:2.8rem;
    color:#968064;
    font-size: 0.15rem;
  }
  .news-box{
    height:3.5rem;
  }
  .news-list{
    padding:.25rem;
    box-sizing: border-box;
  }
  .head-line{
    width:100%;
    height:0.8rem;
    border-bottom: 1px solid #666366;
  }
  .head-line-date{
    font-size: 0.24rem;
    color:#967e62;
  }
  .head-line-title{
    font-size: 0.22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    height:0.26rem;
    line-height: 0.26rem;
    margin-top: 0.1rem;
    white-space: nowrap;
  }
  .news-item a{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin-top: 0.15rem;
    font-size: 0.14rem;
  }
  .news-item a:hover{
    color:#006938;
  }
  .icon{
    width: 0.1rem;
  }
  .icon img{
    width:100%;
  }
  .item-date{
    margin-left: 0.1rem;
    flex: 1;
  }
  .item-title{
    width: 76%;
    height:0.16rem;
    line-height: 0.16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .news-list{
    width: 49.5%;
    height:3.5rem;
    background: #fff;
  }
  .video-box{
    width: 49.5%;
    height:3.5rem;
    box-sizing: border-box;
    background: #000;
  }
  .video-box video{
    width: 100%;
    height:100%;
    object-fit: fill;
  }
  .slider-nav{
    width: 100%;
    height:5rem;
    background-color: @themeColor;
    position: relative;
  }
  /*轮播*/
  .el-carousel__container{
    height:5rem;
  }
  .banner_img{
    width: 100%;
    height:5rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .el-carousel__button {
    background-color: @themeColor;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 5rem;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .title {
    font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
      'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    display: block;
    font-weight: 300;
    font-size: 100px;
    color: #35495e;
    letter-spacing: 1px;
  }

  .subtitle {
    font-weight: 300;
    font-size: 42px;
    color: #526488;
    word-spacing: 5px;
    padding-bottom: 15px;
  }

  .links {
    padding-top: 15px;
  }
</style>
